<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>五星红旗有辅助线</title>  
    </head>  
    <body>  
        <canvas id="canvas" width="600px" height="400px" style="border: 1px solid;"></canvas>        
        <script >  
			// 通过id选择器获取DOM
             var canvas = document.getElementById("canvas");   
             var context = canvas.getContext('2d');   
             var width = canvas.width;   
             var height = width * 2 / 3;      
			 var w = width / 30;
            context.fillStyle = "red";   
            context.fillRect(0, 0, width, height);      
             var minX = [0.50, 0.60, 0.60, 0.50];   
             var minY = [0.10, 0.20, 0.35, 0.45]; 
			  var maxR = 0.15, minR = 0.05;
			  var maxX = 0.25, maxY = 0.25;
              var ox = height * maxX, oy = height * maxY;
            create5star(context, ox, oy, height * maxR, "#ffff00", 0);//绘制五角星   
            for (var ljx = 0; ljx < 4; ljx++) {   
                var sx = minX[ljx] * height, sy = minY[ljx] * height;   
                var theta = Math.atan((oy - sy) / (ox - sx));   
                create5star(context, sx, sy, height * minR, "#ffff00", -Math.PI / 2 + theta);   
            }   
            //画辅助线
            for (var j = 0; j <=14; j++) {//竖线
                context.moveTo(j * w, 0);   
                context.lineTo(j * w, height / 2);   
                context.stroke();   
            }
			context.moveTo(0, height / 2)
			context.lineTo(width / 2, height / 2);   
			context.stroke();   
			context.moveTo(width / 2, 0);   
			context.lineTo(width / 2, height / 2);   
			context.stroke();  //横
            for (var j = 0; j <=9; j++) {   //横线
                context.moveTo(0, j * w);   
                context.lineTo(width / 2, j * w);   
                context.stroke();   
            } 
            for (var ljx = 0; ljx < 4; ljx++) {   //连接线
                context.moveTo(ox, oy);   
                var sx = minX[ljx] * height, sy = minY[ljx] * height;   
                context.lineTo(sx, sy);   
                context.stroke();   
            }   
            function create5star(context, sx, sy, radius, color, rotato){   
                context.save();   
                context.fillStyle = color;   
                context.translate(sx, sy);        
                context.rotate(Math.PI + rotato); 
                context.beginPath();             
                var x = Math.sin(0);   
                var y = Math.cos(0);   
                var dig = Math.PI / 5 * 4;   
                for (var i = 0; i < 5; i++) {    //五条边   
                    var x = Math.sin(i * dig);   
                    var y = Math.cos(i * dig);   
                    context.lineTo(x * radius, y * radius);   
                }  
                 context.closePath();   
                 context.stroke();   
                 context.fill();   
                 context.restore();   
            }   
        </script>  
    </body>  
</html>  